<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>反馈管理</title>
  <link rel="stylesheet" href="../../../js/layui_ext/dtree/dtree.css">
  <link rel="stylesheet" href="../../../js/layui_ext/dtree/font/dtreefont.css"/>
  <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<body class="childrenBody">
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
</fieldset>
<blockquote class="layui-elem-quote">
    <form class="layui-form" method="post" id="searchFrm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">标题:</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询
                </button>
            </div>
        </div>
    </form>
</blockquote>
<!-- 搜索条件结束 -->
<div style="display: none;" id="roleToolBar">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button>
</div>

<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv">
  <form class="layui-form" lay-filter="dataFrm" id="dataFrm">
    <div class="layui-form-item">
      <label class="layui-form-label">通知标题:</label>
      <div class="layui-input-block">
        <input type="text" name="title" placeholder="请输入通知标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">通知内容:</label>
      <div class="layui-input-block">
        <textarea type="textarea" name="content" placeholder="请输入通知内容" autocomplete="off" class="layui-input"></textarea>
      </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
      <div class="layui-input-block">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release"
                lay-filter="doSubmit" lay-submit="">提交
        </button>
        <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">重置
        </button>
      </div>
    </div>
  </form>
</div>
<!-- 添加和修改的弹出层结束 -->
<!-- 数据表格开始 -->
<table class="layui-hide" id="roleTable" lay-filter="roleTable"></table>
<div id="roleBar" style="display: none;">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</div>
<!-- 数据表格结束 -->

<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script type="text/javascript">
  var tableIns;
  layui.extend({
    dtree: '../../../js/layui_ext/dist/dtree'
  }).use(['jquery', 'layer', 'form', 'table', 'dtree'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var dtree = layui.dtree;
    //渲染数据表格
    tableIns = table.render({
      elem: '#roleTable'   // 渲染目标对象
      , url: '/web/noticeInfo/select' // 数据接口
      , title: '用户数据表'// 数据导出标题
      , toolbar: "#roleToolBar"   // 表格工具栏
      // 让表格高度自适应内容
      , height: 'auto'
      , cellMinWidth: 100 // 设置列的最小默认宽度
      , page: 1  // 是否启用分页
      , limits: [10, 20, 30]
      , limit: 10// 默认每页 10 条
      , cols: [[   // 列表数据
        {field: 'id', title: '序号', align: 'center', width: '10%'}
        , {field: 'title', title: '通知标题', align: 'center'}
        , {field: 'content', title: '通知内容', align: 'center'}
        , {field: 'createTime', title: '通知时间', align: 'center'}
        , {fixed: 'right', title: '操作', toolbar: '#roleBar', width: '20%', align: 'center'}
      ]]
    });

    window.previewImage = function (url) {
      if (typeof layer === 'undefined') {
        console.error('layer 未正确加载');
        return;
      }
      layer.open({
        type: 1,
        title: false,
        closeBtn: 1,
        area: ['auto', 'auto'],
        shadeClose: true,
        content: `<img style="max-width: 80vw; max-height: 80vh; object-fit: contain;" src="${url}" alt="预览图片">`
      });
    };
    //模糊查询
    $("#doSearch").click(function () {
      var params = $("#searchFrm").serialize();
      // 修正查询接口地址
      tableIns.reload({
        url: "/web/noticeInfo/select?" + params,
        page: {
          curr: 1 // 重新从第 1 页开始
        }
      });
    });

    //监听头部工具栏事件
    table.on("toolbar(roleTable)", function (obj) {
      console.log("obj", obj)
      openAddRole();

      // switch (obj.event) {
      //     case 'add':
      //         openAddRole();
      //         break;
      // }
      // ;
    })
    //监听行工具事件
    table.on('tool(roleTable)', function (obj) {
      console.log("obj", obj)

      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      if (layEvent === 'del') { //删除
        layer.confirm('确定要删除吗？', {
          btn: ['确定', '取消']
        }, function(index){
          $.ajax({
            url: '/web/noticeInfo/delete?id=' + data.id,
            type: 'POST',
            data: JSON.stringify(data),
            headers: {
              'Content-Type': 'application/json'
            },
            success: function (response) {
              layer.msg('删除成功!');

              // 关闭弹出层
              layer.close(mainIndex);
              // 刷新数据表格
              tableIns.reload();
            },
            error: function (error) {
              // 处理请求错误
              layer.msg('请求出错，请稍后重试');
            }
          });
          layer.close(index);
        });
      } else if (layEvent === 'edit') { //编辑
        openUpdateRole(data);
      } else if (layEvent === 'selectRoleMenu') {
        openselectRoleMenu(data);
      }
    });

    var url;
    var mainIndex;

    //打开添加页面
    function openAddRole() {
      mainIndex = layer.open({
        type: 1,
        title: '新增通知',
        content: $("#saveOrUpdateDiv"),
        area: ['800px', '300px'],
        success: function (index) {
          console.log("index", index)
          //清空表单数据
          $("#dataFrm")[0].reset();
          url = "/web/noticeInfo/insert";
        }
      });
    }

    //打开修改页面
    function openUpdateRole(data) {
      console.log("data123232323", data)
      mainIndex = layer.open({
          type: 1,
          title: '修改通知',
          content: $("#saveOrUpdateDiv"),
          area: ['800px', '300px'],
          success: function (index) {
              form.val("dataFrm", data);
              url = "/web/noticeInfo/update";
              localStorage.setItem("messageItem", JSON.stringify(data));
          }
      });
    }

    //保存
    form.on("submit(doSubmit)", function (obj) {
      // console.log("submint", obj);
      //序列化表单数据
      var params = $("#dataFrm").serialize();
      // console.log("params", params)

      let messageItem = JSON.parse( localStorage.getItem("messageItem"))
      console.log("messageItem", messageItem)
      var data;
      if (messageItem.id) {
        data = {
          id: messageItem.id,
          title: obj.field.title,
          content: obj.field.content
        };
      }else {
        data = obj.field;
      }

      // $.post('/web/blackLists/add', obj.field, function (obj) {
      //     // layer.msg(obj);
      //     //关闭弹出层
      //     layer.close(mainIndex)
      //     //刷新数据 表格
      //     tableIns.reload();
      // })
      $.ajax({
        url: url,
        type: 'POST',
        data: JSON.stringify(data),
        headers: {
          'Content-Type': 'application/json'
        },
        success: function (response) {
          // 关闭弹出层
          layer.close(mainIndex);
          // 刷新数据表格
          tableIns.reload();
        },
        error: function (error) {
          // 处理请求错误
          layer.msg('请求出错，请稍后重试');
        }
      });
    });



    //打开分配菜单的弹出层
    function openselectRoleMenu(data) {
      var menuTree;
      mainIndex = layer.open({
        type: 1,
        title: '分配【' + data.rolename + '】的角色',
        content: $("#selectRoleMenu"),
        area: ['400px', '500px'],
        btnAlign: 'c',
        btn: ['<div class="layui-icon layui-icon-release">确认分配</div>', '<div class="layui-icon layui-icon-close">取消分配</div>'],
        yes: function (index, layero) {
          var nodes = dtree.getCheckbarNodesParam("menuTree");
          var roleid = data.roleid;
          var params = "roleid=" + roleid;

          $.each(nodes, function (i, item) {
            params += "&ids=" + item.nodeId;
          })

          //保存角色和菜单的关系
          $.post("/web/role/saveRoleMenu", params, function (obj) {
            layer.msg(obj);
          })
        },
        success: function (index) {
          //初始化树
          menuTree = dtree.render({
            elem: "#menuTree",
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            response: {message: "msg", statusCode: 0},  //修改response中返回数据的定义
            dataFormat: "list",  //配置data的风格为list
            checkbar: true,//复选框
            checkbarType: "all", // 默认就是all
            checkbarData: "choose",
            url: "/web/role/initRoleMenuTreeJson?roleid=" + data.roleid // 使用url加载（可与data加载同时存在）
          });
        }
      });
    }
  });
</script>
</body>
</html>